<template>
<div>
  <div data-module="discover" data-sub="other" id="g_top" class="m-top">&nbsp;</div>
  <div id="g_nav" class="m-subnav">&nbsp;</div>
  <div class="g-bd4 f-cb">
     <div class="g-mn4">
      <div class="g-wrap6" v-if="albumData">
        <div class="m-info f-cb" id="auto-id-dJEM40G4UzhHVPx">
          <div class="cover u-cover u-cover-dj">
            <img :src="albumData ? albumData.picUrl : null" alt="歌单封面" />
          </div>
          <div class="cnt">
            <div class="cntc">
              <!-- 专辑名称  歌手 时间.... -->
              <div class="topblk">
                <div class="hd f-cb">
                  <i class="f-fl A-icn A-icn-13 f-pr"></i>
                  <div class="tit">
                    <h2 class="f-ff2 f-brk">
                      {{ albumData ? albumData.name : null }}
                    </h2>
                  </div>
                </div>
                <p class="intr">
                  <b>歌手：</b>
                   <span title="NINEONE#">
                    <a class="s-fc7" href="javascripy:;" v-for="(item , index) in albumData.artists" :key="index" @click="artist(item.id)">{{item.name}} <slot v-if="index !== albumData.artists.length -1"> / </slot> </a>
                    </span>
                </p>
                <p class="intr">
                  <b>发行时间：</b
                  >{{ albumData ?  transfromDate : null }}
                </p>
                <p class="intr">
                  <b>发行公司：</b>{{ albumData ? albumData.company : null }}
                </p>
              </div>
              <div class="btns f-cb">
                <a href="javascript:;"
                  class="u-btn2 u-btn2-2 u-btni-addply f-fl"
                  ><i><em class="ply"></em> 播放</i></a
                >
                <a href="javascript:;" class="u-btni u-btni-fav"
                  ><i>收藏</i>
                </a>
                <a href="javascript:;" class="u-btni u-btni-share"
                  ><i
                    >({{ albumData ? albumData.info.shareCount : null }} )</i
                  ></a
                >
                <a href="javascript:;" class="u-btni u-btni-dl"><i>下载</i></a>
                <a href="javascript:;" class="u-btni u-btni-cmmt"
                  ><i
                    >({{ albumData ? albumData.info.commentCount : null }} )</i
                  ></a
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 专辑介绍 -->
        <div class="n-albdesc">
          <h3>专辑介绍：</h3>
          <!-- 不完整 -->
          <div id="album-desc-dot" class="f-brk" >
            <p v-for="(item , index) in imperfect" :key="index">{{item}}</p>
          </div>
          <!-- 完整 -->
          <div id="album-desc-more" class="" v-show="TEXT_flag">
            <p class="f-brk" v-for="(item , index) in description" :key="index">
               {{item}}
            </p>
          </div>
          <div class="f-cb" v-show="description" @click=" TEXT_flag = !TEXT_flag">
            <a id="album-desc-spread" href="javascript:;" class="s-fc7 f-fr"
              >展开<i class="A-icn A-icn-69"></i
            ></a>
          </div>
        </div>
        <playList :songs = 'songs' :albumID='albumID'></playList>
        <comment :id="albumID"></comment>
      </div>
    </div> 
    <albumSidebar :Id="artistId"></albumSidebar>
  </div>
</div>
</template>

<script>
import { album } from "../../../network/discover";
import { formatDate } from "../../../components/tool/tool";
import albumSidebar from './sidebar.vue'
import playList from './playList.vue';
import comment from '../../../components/comment/comment.vue'
export default {
  data() {
    return {
      TEXT_flag: false, //专辑介绍完整 和 不完整
      albumData: null, //专辑数据
      songs:null,     //专辑歌单数据
      description:null, //完整的简介
      imperfect:null, //不完整的简介
      albumID: null,  //专辑title和专辑id
      artistId :null//这个专辑作者id
    };
  },
  components:{
    playList,
    comment,
    albumSidebar
  },
  methods: {
    res_albumData(id) {    
      album(id).then((res) => {
        this.albumData = res.data.album;
        this.artistId = res.data.album.artist.id  //这个专辑的作者id
        this.songs = res.data.songs
        var description = res.data.album.description.split('\n')
         description.forEach((item , index) => {
              if(!item){description.splice(index , 1)}
         });
         if (description.length >3) {
             this.description = description
             this.imperfect = description.splice(0 ,3)
         }else{
             this.imperfect = description
         }
      });
    },
    artist(id){
      this.$router.push({path:'/home/artistDetails' , query:{id :id}})
    }
  },
  computed: {
    transfromDate() {
      return formatDate(this.albumData.publishTime);
    },
  },
   beforeRouteUpdate (to, from, next) {
     this.albumData = null 
      this.res_albumData(to.query.id);
     this.albumID= {name:'专辑' , id: to.query.id}
       next()
    },
  created() {
    this.res_albumData(this.$route.query.id);
     this.albumID= {name:'专辑' , id: this.$route.query.id}
  },
};
</script>


<style scoped>
@import url("./album.css");
</style>